<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p k-html="html"></p>
    <p>{{ name }}</p>
    <p k-text="name"></p>
    <p>
      <span>hahaha---</span>
      {{ name }}
    </p>
    <p>{{ age }}</p>
    <input type="text" k-model="name">
    <br>
    <button @click="changeNameAge">change</button>
  </div>
  <script src="./compile.js"></script>
  <script src="./KVue.js"></script>
  <script>
    function getRandomNum(min, max) {
      return min + Math.round(Math.random() * (max - min));
    }
    let vm = new KVue({
      el: '#app',
      data: {
        name: 'lin',
        age: 10,
        foo: {
          bar: 'bar'
        },
        html: '<h1>start</h1>'
      },
      created(){
        console.log("开始了");
        setTimeout(() => {
          this.name = '测试';
          this.age = 100;
        }, 2000);
      },
      methods: {
        changeNameAge(){
          this.age = getRandomNum(0, 100);
          let arr = "abcdefghijklmnopqrstuvwxyz".split("");
          let str = "";
          let len = getRandomNum(5, 10);
          for (let i = 0; i < len; i++) {
            str += arr[getRandomNum(0, 24)];
          }
          this.name = str;
        }
      }
    });
    // 测试代码，测试observe是否成功
    // vm.$data.name;
    // vm.$data.name = "123";
    // vm.$data.foo.bar;
    // vm.$data.foo.bar = "oh my bar";
    // console.log("-----------------")
    // 测试代码，测试proxyData是否成功
    // vm.name;
    // vm.name = "234";
    // vm.foo.bar;
    // vm.foo.bar = "oh";
    // 测试代码，测试proxyMethod是否成功
    // vm.changeNameAge();
  </script>
</body>
</html>